<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- 移动端视口配置 - 支持用户缩放 -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=0.25, maximum-scale=3.0, user-scalable=yes" />
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.js"></script> -->

  <script src="https://cdn.hterobot.com/vue/public/js/href.js"></script>
  <script>
    function isIE() { //ie?
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        return true;
      }
      if (!('Symbol' in window)) {
        return true
      }
      // var userAgent = navigator.userAgent.split(' ').map(function (e) { return e.split('/') }).filter(function (e) { return e.length > 1 })
      // var Firefox = userAgent.find(function (e) { e[0] === 'Firefox' })
      // if(Firefox && Number(Firefox[1].slice('.')[0]) > 32) {
      //   return true
      // }
    }

    if (isIE()) {
      window.open('https://cdn.hterobot.com/noipcode/hgkj.html')
    }
  </script>
  <link href="https://cdn.hterobot.com/noipcode/css/in.css" rel="stylesheet" />
  <link href="https://cdn.hterobot.com/noipcode/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="https://cdn.hterobot.com/fonts/FluentSystemIcons-Filled.css" />
  <script src="https://at.alicdn.com/t/font_2592711_mgoffxnmu9d.js"></script>
  <script src="https://at.alicdn.com/t/font_1940226_vfhwjpcg5bd.js"></script>
  <script src="https://at.alicdn.com/t/font_2630703_ausqbj8135o.js"></script>
  <!-- 胖达 -->
  <script src="//at.alicdn.com/t/c/font_4271319_mf64o0t41sq.js"></script>
  <!-- 隐藏ico -->
  <!-- <link rel="icon" href="https://cdn.hterobot.com/vue/public/favicon.ico" /> -->
  <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">

  <script>
    window.MathJax = {
      tex: {
        inlineMath: [
          ["$", "$"],
        ],
      },
      startup: {
        pageReady: function () {
          return window.MathJax.startup.defaultPageReady();
        },
      },

      svg: {
        fontCache: "global",
      },
    };
  </script>
  <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.hterobot.com//npm/mathjax/es5/tex-chtml.js"></script>
  <script>
    (function () {
      let currentScale = 1;
      let isScaled = false;

      function detectDeviceAndScale() {
        const userAgent = navigator.userAgent;
        const screenWidth = window.innerWidth;

        const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(userAgent);
        const isSmallScreen = screenWidth <= 768;
        const isPhone = isMobileUA && isSmallScreen && !/iPad/i.test(userAgent);

        console.log('设备检测结果:', { isPhone, screenWidth, isMobileUA });

        document.documentElement.classList.remove('mobile-device', 'phone-device', 'desktop-device');

        if (isPhone) {
          document.documentElement.classList.add('mobile-device', 'phone-device');

          const targetWidth = 1200;
          let scale = screenWidth / targetWidth;

          if (scale < 0.35) scale = 0.35;
          if (scale > 1.0) scale = 1.0;

          currentScale = scale;
          document.documentElement.style.setProperty('--phone-scale', scale);

          console.log(`🔥 手机端模式激活，缩放比例: ${scale.toFixed(3)}`);
          return true;
        } else {
          document.documentElement.classList.add('desktop-device');
          currentScale = 1;
          console.log('🖥️ 桌面/平板模式，不进行缩放');
          return false;
        }
      }

      function applyOrRemoveScale() {
        const mainContent = document.querySelector('.main');

        if (!mainContent) {
          console.log('⚠️ 未找到.main元素，稍后重试');
          return false;
        }

        const shouldScale = document.documentElement.classList.contains('phone-device');

        if (shouldScale) {
          // 应用缩放
          mainContent.style.transform = `scale(${currentScale})`;
          mainContent.style.transformOrigin = 'top left';
          mainContent.style.width = `${100 / currentScale}%`;

          isScaled = true;

          // 防止横向滚动
          document.body.style.overflowX = 'hidden';
          document.documentElement.style.overflowX = 'hidden';

          console.log(`✅ 缩放已应用: ${currentScale.toFixed(3)}`);
          return true;
        } else if (!shouldScale && isScaled) {
          // 移除缩放
          mainContent.style.transform = '';
          mainContent.style.transformOrigin = '';
          mainContent.style.width = '';

          document.body.style.overflowX = '';
          document.documentElement.style.overflowX = '';

          isScaled = false;
          console.log('❌ 缩放已移除');
          return true;
        }

        return false;
      }

      function handleResize() {
        detectDeviceAndScale();
        setTimeout(() => {
          applyOrRemoveScale();
        }, 100);
      }

      // 监听路由变化
      function setupRouteWatcher() {
        let lastPath = window.location.hash;

        window.addEventListener('hashchange', function () {
          const newPath = window.location.hash;
          if (newPath !== lastPath) {
            lastPath = newPath;
            console.log('🔄 路由变化检测到:', newPath);

            setTimeout(() => {
              applyOrRemoveScale();
            }, 300);
          }
        });

        // DOM变化监听
        const observer = new MutationObserver(function (mutations) {
          let shouldReapply = false;

          mutations.forEach(function (mutation) {
            if (mutation.type === 'childList') {
              mutation.addedNodes.forEach(function (node) {
                if (node.nodeType === 1) {
                  if (node.classList && node.classList.contains('main')) {
                    shouldReapply = true;
                    console.log('🆕 检测到新的.main元素');
                  }
                }
              });
            }
          });

          if (shouldReapply && document.documentElement.classList.contains('phone-device')) {
            console.log('🔄 DOM变化触发缩放重新应用');
            setTimeout(() => {
              applyOrRemoveScale();
            }, 200);
          }
        });

        const appElement = document.getElementById('app');
        if (appElement) {
          observer.observe(appElement, {
            childList: true,
            subtree: true
          });
        }
      }

      // 初始化
      detectDeviceAndScale();

      function initScale() {
        let attempts = 0;
        const maxAttempts = 15;

        const tryApply = () => {
          attempts++;
          const success = applyOrRemoveScale();

          if (!success && attempts < maxAttempts) {
            console.log(`第${attempts}次尝试失败，继续重试...`);
            setTimeout(tryApply, 300);
          } else if (success) {
            console.log(`第${attempts}次尝试成功！`);
            setupRouteWatcher();
          } else {
            console.log(`达到最大重试次数(${maxAttempts})，停止尝试`);
            setupRouteWatcher();
          }
        };

        tryApply();
      }

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initScale);
      } else {
        initScale();
      }

      window.addEventListener('resize', handleResize);
      window.addEventListener('orientationchange', function () {
        setTimeout(handleResize, 500);
      });

    })();
  </script>
  <title>acCoder教师端</title>
</head>

<body id="body">
  <div id="Loading">
    <!-- 默认display: none; -->
    <div class="loading position-fixed" style="display: none;">
      <div class="block"></div>
    </div>
  </div>
  <div id="app" class="sassMgmt acCoder"></div>
  <script type="module" src="/src/acCoderSaasMgmt/main.ts"></script>
</body>

</html>